import { reactive, ref } from 'vue'
import { FormItemType } from '@/components/form/type'
import {
  reqMemberBody,
  reqMemberRoleBody,
} from '@/pages/topic/api/types/member.ts'
import { tableColumn } from '@/components/table/column'
import { API, reqQueryRoleList } from '@/pages/topic/api/member.ts'

export const useAddBlog = () => {
  const memberTableColumn = ref<tableColumn[]>([
    { label: '成员', prop: 'name', type: 'solt', slotName: 'userinfo' },
    { label: '角色', prop: 'roleName' },
    { label: '简介', prop: 'intro' },
    { label: '电话', prop: 'phone' },
    { label: '邮箱', prop: 'email' },
    { label: '附件', prop: 'fileUrlList' },
    { label: '权重', prop: 'weight' },
    { label: '状态', prop: 'status' },
    { label: '操作', prop: '-', type: 'slot', slotName: 'handler' },
  ])

  const bolgFormItem = ref<FormItemType[]>([
    { type: 'upload', prop: 'avatar', label: '封面' },
    { type: 'input', prop: 'name', label: '标题' },
    { type: 'textarea', prop: 'intro', label: '简介' },
    {
      type: 'select',
      prop: 'sex',
      label: '类别',
      options: [
        { label: '男', value: 1 },
        { label: '女', value: 2 },
      ],
    },
    {
      type: 'editor',
      prop: 'content',
      label: '内容',
      style: { height: '250px' },
    },
  ])

  const getData = async () => {
    const { data } = await reqQueryRoleList(1)
    return data
  }

  const bolgAddData = reactive<reqMemberBody>({
    avatar: '',
    name: '',
    age: 0,
    sex: 0,
    content: '',
  })

  const memberRoleItem = ref<FormItemType[]>([
    { type: 'input', prop: 'roleName', label: '角色名称' },
    { type: 'input', prop: 'weight', label: '权重' },
  ])

  const memberRoleData = ref<reqMemberRoleBody>({
    subjectGroupId: 1,
    roleName: '',
    weight: 0,
  })

  return {
    bolgFormItem,
    bolgAddData,
  }
}
